<script lang="ts">
/**
 * @author leo
 * @description #19512 标题栏组件
 * @param name 分组名称
 *
 * @event on-change-group-name // 确定重命名 callback name: string 新名字
 * @event on-click-del-group // 删除分组
 */
import { Component, Vue, Prop, Emit } from "vue-property-decorator";

@Component({})
export default class TitleCard extends Vue {
  @Prop() public name!: string; // 分组名称
  @Prop() public groupId!: number; // 分组id

  public changeGroupNameVisible = false; // 重命名开关
  public changeGroupName = "";

  // 取消重命名
  public closeGroupNameVisible() {
    this.changeGroupName = "";
    this.changeGroupNameVisible = false;
  }

  // 确定重命名
  // name: string 新名字
  @Emit("on-change-group-name")
  public onChangeGroupName(name: string) {
    this.changeGroupNameVisible = false;
  }

  // 删除分组
  @Emit("on-click-del-group")
  public onClickDelGroup() {}
}
</script>

<template>
  <div class="total_card">
    <span class="total_card-list_title">{{name}}</span>
    <el-popover placement="bottom" width="325" trigger="click" v-model="changeGroupNameVisible">
      <p>编辑名称</p>
      <el-input v-model="changeGroupName" placeholder="请输入内容" style="margin:8px 0;"></el-input>
      <div style="text-align: right; margin: 0">
        <el-button size="mini" type="text" @click="closeGroupNameVisible">取消</el-button>
        <el-button type="primary" size="mini" @click="onChangeGroupName(changeGroupName)">确定</el-button>
      </div>
      <el-button type="text" slot="reference" v-show="groupId !== 0">重命名</el-button>
    </el-popover>
    <el-button
      type="text"
      style="margin-left:10px;"
      v-show="groupId !== 0"
      @click="onClickDelGroup"
    >删除分组</el-button>
  </div>
</template>

<style lang="less">
.total_card {
  position: relative;
  padding: 4px 0;
  background: #f8f8f8;
  display: flex;
}
.total_card-list_title {
  font-size: 18px;
  line-height: 32px;
  padding: 0 12px;
}
</style>